<template>
	<el-divider>导航栏</el-divider>
	<div class="form-item">
		<div class="label">是否启用</div>
		<el-switch v-model="visible" :active-value="true" :inactive-value="false"></el-switch>
	</div>
	<div class="form-item">
		<div class="label">风格</div>
		<el-radio-group v-model="type">
			<el-radio-button label="shape">柔和</el-radio-button>
			<el-radio-button label="card">卡片</el-radio-button>
		</el-radio-group>
	</div>
</template>

<script setup>
import { computed } from "vue"
import { useSettingStore } from "/store/setting"
const settingStore = useSettingStore()

const visible = computed({
	get() {
		return settingStore.tab.visible
	},
	set(value) {
		settingStore.tab.visible = value
	},
})
const type = computed({
	get() {
		return settingStore.tab.type
	},
	set(value) {
		settingStore.tab.type = value
	},
})
</script>

<style lang="scss" scoped></style>
